<template>
  <div class="footerBar">
    <div class="friendlyLink">
      <div class="title">网站导航：</div>
      <el-select
        class="select1"
        v-model="value"
        placeholder="国家级科技园区"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        class="select2"
        v-model="value"
        placeholder="国务院各部委局"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="value"
        class="select3"
        placeholder="省级政府"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="value"
        class="select4"
        placeholder="国内重要城市"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="value"
        class="select5"
        placeholder="市政府"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="value"
        class="select6"
        placeholder="区（市）县政府"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        class="select7"
        v-model="value"
        placeholder="高新区内政府"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        class="select8"
        v-model="value"
        placeholder="新闻媒体"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="contact">
      <div class="left">
        <p><span class="name">企业服务热线：</span><span>028-85339186</span><span>028-85339195</span></p>
        <p><span class="name">技术支持电话：</span><span>028-85225102</span></p>
        <p><span class="name">工商电话：</span><span>028-85150740</span></p>
        <p><span class="name">税务电话：</span><span>028-61512366</span></p>
      </div>
      <div class="center">
        <p><span class="name">主办单位：</span><span>成都高新区经济运行局（企业服务局）</span></p>
        <p><span class="name">承办单位：</span><span>成都高新区企业服务中心</span></p>
        <p><span class="name">工作时间：工作日</span><span>9:00-12:00 13:00-17:00</span></p>
        <p><span class="name">政策申报QQ群：</span><span>722105310</span></p>
      </div>
      <div class="right">
        <div class="code_left">
          <div class="codeBox"></div>
          <p>高新通微信公众号</p>
        </div>
        <div class="code_right">
          <div class="codeBox"></div>
          <p>高新通微信小程序</p>
        </div>
      </div>
    </div>
    <div class="icpBox">
      <div>
        <span class="title">主办单位： Co</span><span>成都高新区经济运行局（企业服务局）</span>
      </div>
      <div>
        <span class="title">承办单位：</span><span>成都高新区企业服务中心</span>
      </div>
      <div>
        <span class="title">备案号：</span><span>蜀ICP备20019507号-3</span>
      </div>
      <div>
        <span> Copyright © 2017-2022 cdhtqyfw.cn, All Rights Reserved</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [],
      value: ''
    }
  }
}
</script>

<style lang="scss" scpoed>
.footerBar {
  padding: 40px 0 0;
  background: #e7eff7;
}
.friendlyLink {
  align-items: center;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background: white;
  .title {
    color: #333;
    font-weight: 600;
  }
  .el-input__inner {
    background: none;
    border: none;
  }
  .el-input__inner::placeholder {
    color: #333;
  }
  .el-select .el-input .el-select__caret {
    color: #333;
  }

  .select1 {
    width: 146px;
  }
  .select2 {
    width: 146px;
  }
  .select3 {
    width: 104px;
  }
  .select4 {
    width: 126px;
  }
  .select5 {
    width: 84px;
  }
  .select6 {
    width: 146px;
  }
  .select7 {
    width: 116px;
  }
  .select8 {
    width: 104px;
  }
}

.contact {
  width: 1200px;
  margin: 0 auto;
  margin-top: 25px;
  display: flex;
  .left {
    border-right: 2px solid #c9d8ed;
    padding-right: 86px;
    .name {
      display: inline-block;
      width: 114px;
    }
    p {
      height: 36px;
      color: #363942;
      font-weight: 600;
    }
    p:last-child {
      height: 20px;
    }
  }
  .center {
    padding-left: 94px;
    margin-right: 72px;
    .name {
      display: inline-block;
    }
    p {
      height: 36px;
      color: #363942;
      font-weight: 600;
    }
    p:last-child {
      height: 20px;
    }
  }
  .right {
    display: flex;
    .code_left,
    .code_right {
      width: 114px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #363942;
      margin: 0 5px;
      .codeBox {
        width: 90px;
        height: 90px;
        margin: 0 auto;
      }
    }
    .code_left {
    }
    .code_right .codeBox:nth-child(1) {
      background: url(https://tests.winpow.com/vuestatic/img/home/cd2.jpg);
    }
    .code_left .codeBox:nth-child(1) {
      background: url(https://tests.winpow.com/vuestatic/img/home/cd1.jpg);
    }
  }
}
.icpBox {
  display: flex;
  align-items: center;
  height: 42px;
  justify-content: center;
  font-size: 14px;
  background: #1466cf;
  color: white;
  margin-top: 30px;
}
</style>